<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/shoppingcar.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2836455_picjb9dpzmm.css">
    <script src="../js/jquery-1.11.3.js"></script>
    <script src="../js/shoppingcar.js"></script>
</head>

<body>
    <!-- 顶部 -->
    <div class="header_top">
        <div class="ui-ct">
            <!-- 左 -->
            <div class="header_top_left">

                <span class="tipsBar">
                    <span>欢迎来到网上商城！请</span>
                <a href="./login.html" class="logo">登录</a>
                <a href="./reg.html" class="logo">注册</a>
                </span>
            </div>
            <!-- 右 -->
            <div class="header_top_right">
                <ul>
                    <li>
                        网站导航
                    </li>
                    <li>
                        客户服务
                    </li>
                    <li>
                        手机商城
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- logo -->
    <div class="logo_">
        <div class="logo__">
            <div class="left">
                <a href="home.html"><img src="http://images.400976.cn/images/77/20210616232653_36101.png" alt=""></a>
                <span>购物车</span>
            </div>
            <div class="top-s f_r">
                <div class="top-s-buydd">
                    <dl>
                        <dt><i>1</i></dt>
                        <dd>1.我的购物车</dd>
                    </dl>
                    <dl class="on-e">
                        <dt><i>2</i></dt>
                        <dd>2.填写核对订单信息</dd>
                    </dl>
                    <dl class="on-e">
                        <dt><i>3</i></dt>
                        <dd>3.支付订单</dd>
                    </dl>
                </div>
            </div>

        </div>
    </div>
    <!-- 购物车 -->
    <div class="shopp">
        <div class="shopp_">

            <div class="table">
                <h3>我的购物车
                    <div class="xian"></div>
                </h3>
                <div class="tr">
                    <div class="item">
                        <input type="checkbox" class="checkall" />全选
                    </div>
                    <div class="item">
                        图片
                    </div>
                    <div class="item">
                        名称
                    </div>
                    <div class="item">
                        价格
                    </div>
                    <div class="item">
                        数量
                    </div>
                    <div class="item">
                        小计
                    </div>
                    <div class="item">
                        操作
                    </div>
                </div>


                <div class="tbody">
                    购物车也太空了，快去选几件商品吧
                    <a href="./goodslist.html"><button class="gouwu">去购物</button></a>
                </div>

                <div class="tr">
                    <div class="item delall">
                        批量删除
                    </div>
                    <div class="item">

                    </div>
                    <div class="item">

                    </div>
                    <div class="item">

                    </div>
                    <div class="item" id="totalnum">
                        数量汇总
                    </div>
                    <div class="item" id="totalprice">
                        价格汇总
                    </div>
                    <div class="item active">
                        结算
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="top">
            <ul>
                <li>
                    <i class="iconfont icon icon-zhengpinbaozhangxian"></i> 正品保障
                </li>
                <li>
                    <i class="iconfont icon icon-qiandai"></i> 安全支付
                </li>
                <li>
                    <i class="iconfont icon icon-013-baoyou"></i> 闪电发货
                </li>
                <li>
                    <i class="iconfont icon icon-kefufill"></i>售后无忧
                </li>
                <li>
                    <i class="iconfont icon icon-aixin"></i>贴心服务
                </li>
            </ul>
        </div>
        <div class="botton">
            <img src="http://images.400976.cn/images/77/20210616232653_36101.png" alt="">
            <ol>
                <li>
                    <a href="#">网站首页</a>
                </li>
                <li>
                    <a href="#">品牌导航</a>
                </li>
                <li>
                    <a href="#">资讯导航</a>
                </li>
                <li>
                    <a href="#">问答导航</a>
                </li>
                <li>
                    <a href="#">口碑导航</a>
                </li>
                <li>
                    <a href="#">价格表导航</a>
                </li>
                <li>
                    <a href="#">图片导航</a>
                </li>
            </ol>
            <p>Copyright 2012- 2020 http://www.400976.cn 版权所有 漂洋海淘 渝ICP备14009588号-38 |</p>
            <h3>重庆归农农业科技有限公司 版权所有</h3>
        </div>
    </div>
</body>
<script>
    // 标识用户身份
    var tipsBar = document.getElementsByClassName("tipsBar")[0];


    var backurl = window.localStorage
    console.log(backurl);
    if (backurl) {
        var user = backurl.getItem("user");
        console.log(user);
        if (user) {
            tipsBar.innerHTML = `<span>欢迎您,${user}</span><button onclick="exit()">退出</button>`;
        }
    }

    function exit() {
        backurl.removeItem("user");
        location.reload();
    }
</script>

</html>